{extend name="Base" /}
{block name="title"}{$title}{/block}
{block name="body"}
<script type='text/javascript' src='/js/backend/custom.js?{:VER}'></script>
<fieldset class="layui-elem-field layui-field-title">
	<legend>{$name}</legend>
</fieldset>

<form class="layui-form">
	<div class="layui-inline">
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="分类名称" autocomplete="off" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-input-inline">
			<select name="pid" lay-verify="required">
				<option value="">选择父分类</option>
				<option value="0">一级分类</option>
				{volist id="vo" name="c"}
				<option value="{$vo.id}">{$vo.name}</option>
				{/volist}
			</select>
		</div>
		<div class="layui-input-inline">
			<input type="text" name="sort" placeholder="排序" autocomplete="off" class="layui-input" value="0" lay-verify="required">
		</div>
		<div class="layui-input-inline">
			<select name="display" lay-verify="required">
				<option value="0">显示</option>
				<option value="1">不显示</option>
			</select>
		</div>
	</div>
	<button class="layui-btn" lay-submit lay-filter="submit">提交</button>
</form>
<table id="category" lay-filter="category" class="layui-hide"></table>

<script type="text/html" id="bar">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
	layui.use(['form', 'layer', 'table'], function () {
		var form = layui.form;
		var layer = layui.layer;
		var table = layui.table;

		//监听工具条
		table.on('tool(category)', function (obj) {
			var data = obj.data;
			if (obj.event === 'del') {
				layer.confirm('确认要删除么？', function (index) {
					layer.close(index);
					obj.del();
					send({type: 1, id: data.id}, "torrent", "assCategory");
				});
			} else if (obj.event === 'name') {
				layer.prompt({
						title: '修改分类名称',
						value: data.name
					},
					function (value, index) {
						layer.close(index);

						ajax_send(data, "name", value);
						obj.update({name: value});
					}
				);
			} else if (obj.event === 'sort') {
				layer.prompt({
						title: '修改 ' + data.name + ' 的排序',
						value: data.sort === 0 ? "0" : data.sort
					},
					function (value, index) {
						layer.close(index);

						ajax_send(data, "sort", value);
						obj.update({sort: value});
					}
				);
			} else if (obj.event === 'display') {
				layer.prompt({
						title: '修改 ' + data.name + ' 的显示',
						value: data.display === 0 ? "0" : data.display
					},
					function (value, index) {
						layer.close(index);

						ajax_send(data, "display", value);
						obj.update({display: value});
					}
				);
			} else if (obj.event === 'pid_name') {
				$.ajax({
					type: "POST",
					url: "/backend/torrent/getCategory",
					cache: false,
					data: {type: 1},
					dataType: "json",
					success: function (e) {
						if (e.status === 1) {
							layer.open({
								type: 1,
								title: '修改 ' + data.name + ' 的父分类',
								closeBtn: 1,
								area: ['350px', '450px'],
								shade: 0.8,
								id: 'pid_name',
								btn: ['确定', '取消'],
								btnAlign: 'c',
								content: "<div style='padding: 15px'>" +
								"<form class=\"layui-form\">" +
								"<select name=\"pid\" id='category_" + data.id + "'>" +
								"<option value=''>选择父分类</option>" +
								"<option value='0'>一级分类</option>" +
								"</select>" +
								"</form>" +
								"</div>",
								yes: function (index) {
									layer.close(index);
									var value = $("#category_" + data.id + " option:selected").val();
									$.ajax({
										type: "POST",
										url: "/backend/torrent/editCategory",
										cache: false,
										data: {
											id: data.id,
											k: "pid",
											v: value
										},
										dataType: "json",
										success: function (e) {
											if (e.status === 1) {
												obj.update({pid_name: e.data.name});
												layer.alert(e.message, {
													//成功图标
													icon: 1
												});
											} else if (e.status === 0) {
												layer.alert(e.message, {
													//失败图标
													icon: 2
												});
											} else {
												layer.alert("系统错误，请稍后重试", {
													//失败图标
													icon: 2
												});
											}
										}
									});
								}
							});
							var category = e.data;
							for (var i_category in category) {
								var o_category = $("<option></option>");
								$(o_category).val(category[i_category]['id']);
								$(o_category).html(category[i_category]['name']);
								$('#category_' + data.id).append(o_category);
							}
							form.render('select');
						}
					}
				});
			}
		});

		form.on('submit(submit)', function (data) {
			$.ajax({
				type: "POST",
				url: "/backend/torrent/assCategory",
				cache: false,
				data: data.field,
				dataType: "json",
				success: function (e) {
					if (e.status === 1) {
						table.reload("category");
						layer.alert(e.message, {
							//成功图标
							icon: 1
						});
					} else if (e.status === 0) {
						layer.alert(e.message, {
							//失败图标
							icon: 2
						});
					} else {
						layer.alert("系统错误，请稍后重试", {
							//失败图标
							icon: 2
						});
					}
				}
			});
			return false;
		});

		table.render({
			id: "category",
			elem: '#category',
			page: true,
			height: 650,
			even: true,
			method: 'POST',
			url: "/backend/torrent/getCategory",
			cols: [[
				{space: true},
				{field: 'id', title: 'ID', sort: true, width: 120},
				{field: 'name', title: '分类名称', sort: true, width: 150, event: 'name', style: 'cursor: pointer;'},
				{field: 'pid_name', title: '父分类', sort: true, width: 150, event: 'pid_name', style: 'cursor: pointer;'},
				{field: 'sort', title: '排序', sort: true, width: 80, event: 'sort', style: 'cursor: pointer;'},
				{field: 'display', title: '显示', sort: true, width: 80, event: 'display', style: 'cursor: pointer;'},

				{title: '操作', width: 80, align: 'center', toolbar: '#bar', fixed: 'right'}
			]]
		});
	});

	function ajax_send(data, name, value) {
		$.ajax({
			type: "POST",
			url: "/backend/torrent/editCategory",
			cache: false,
			data: {
				id: data.id,
				k: name,
				v: value
			},
			dataType: "json",
			success: function (e) {
				if (e.status === 1) {
					layer.alert(e.message, {
						//成功图标
						icon: 1
					});
				} else if (e.status === 0) {
					layer.alert(e.message, {
						//失败图标
						icon: 2
					});
				} else {
					layer.alert("系统错误，请稍后重试", {
						//失败图标
						icon: 2
					});
				}
			}
		});
	}
</script>
{/block}